<template>
    <div class="app-container">
            <el-row :gutter="12">
                 <el-col :span="4" style="form-inline">
                    <el-input placeholder="商品名称"  class="input-with-select" v-model="queryInfo.productName" clearable @clear="getMallSubOrderList" />
                </el-col>
                <el-col :span="3" style="form-inline">
                    <el-input placeholder="订单号"  class="input-with-select"  v-model="queryInfo.tradeno" clearable @clear="getMallSubOrderList" />
                </el-col>
                <el-col :span="3" style="form-inline">
                    <el-input placeholder="手机号"  class="input-with-select"  v-model="queryInfo.mobile" clearable @clear="getMallSubOrderList" />
                </el-col>
                <el-col :span="2" style="form-inline">
                    <el-select v-model="queryInfo.payStatus" clearable placeholder="支付状态" @clear="getMallSubOrderList">
                            <el-option
                                v-for="item in payStatusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                </el-col>
                <el-col :span="2" style="form-inline">
                    <el-select v-model="queryInfo.expressStatus" clearable placeholder="物流状态" @clear="getMallSubOrderList">
                            <el-option
                                v-for="item in expressStatusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="getMallSubOrderList"
                        >搜索</el-button
                    >
                </el-col>
            </el-row>
            <el-table :data="records" border stripe>

                <el-table-column label="商品名称" prop="productName">
                     <template slot-scope="scope">
                        {{scope.row.productName}}
                        <el-link v-if="scope.row.orderItemList.length > 1" type="success">等{{scope.row.orderItemList.length}}件商品</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="订单号" prop="tradeno"></el-table-column>
                <el-table-column label="手机号" prop="mobile"></el-table-column>
                <el-table-column label="支付状态" prop="payStatusText"></el-table-column>
                <el-table-column label="订单状态" prop="orderStatusText"></el-table-column>
                 <el-table-column label="购买数量" prop="quantity"></el-table-column>
                <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
                <el-table-column label="现金支付" prop="cashPay"></el-table-column>
                <el-table-column label="下单时间" prop="addTime"></el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <router-link :to="{path:'/order/detail',query:{orderId:scope.row.id}}">详情</router-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNo"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
    </div>
</template>

<script>
import Api from "@/api/Api.js"
 import axios from 'axios'
export default {
    data() {
        return {
            queryInfo: {
                productName: "",
                vendorName: "",
                pageNo: 1, // 页码
                pageSize: 10, // 页大小
                payStatus: 'S',
                expressStatus: ''
            },
            payStatusList:[{'id':'','name':'全部','value':''},
                            {'id':'N','name':'未支付','value':'N'},
                            {'id':'S','name':'已支付','value':'S'}],
            expressStatusList:[{'id':'','name':'全部','value':''},
                            {'id':'wait','name':'待发货','value':'wait'},
                            {'id':'send_part','name':'部分发货','value':'send_part'},
                            {'id':'send','name':'已发货','value':'send'},
                            {'id':'receive','name':'已收货','value':'receive'}],
            records: [],
            vendorList:[],
            total: 0
        };
    },
    watch: {

    },
    created() {
      this.getMallSubOrderList();
    },
    methods: {
        getMallSubOrderList() {
            Api.getMallSubOrderList(this.queryInfo).then((res) => {
                if (res.success) {
                    this.records = res.data.records;
                    this.total = res.data.total;
                } else {
                    return this.$message.error("获取供应商列表失败");
                }
            });
        },
        handleSizeChange(pageSize) {
            this.queryInfo.pageNo = 1;
            this.queryInfo.pageSize = pageSize;
            this.getMallSubOrderList();
        },
        // 监听pageNo的事件
        handleCurrentChange(pageNo) {
            this.queryInfo.pageNo = pageNo;
            this.getMallSubOrderList();
        }
    }
};
</script>

<style>
.form_ipt {
    width: 450px;
}
.moreProduct {
    color: red;
    font-size: small;
    size: 8px;
}
</style>
